import { Form, Input, Button, Toast } from "antd-mobile";
import { apiLogin } from "../api";
import { useNavigate } from "react-router-dom";

const Login = () => {
  const navigate = useNavigate();

  // 表单提交
  const submit = (val) => {
    apiLogin(val).then((res) => {
      // 成功提示
      Toast.show({
        icon: "success",
        content: res.msg,
      });
      //   跳转页面
      navigate("/");
    });
  };

  return (
    <div className="public">
      <Form
        layout="horizontal"
        onFinish={submit}
        footer={
          <Button block type="submit" color="primary" size="large">
            提交
          </Button>
        }
      >
        <Form.Item
          name="username"
          label="用户名"
          rules={[{ required: true, message: "用户名不能为空" }]}
        >
          <Input placeholder="请输入用户名" />
        </Form.Item>

        <Form.Item
          name="password"
          label="密码"
          rules={[{ required: true, message: "密码不能为空" }]}
        >
          <Input type="password" placeholder="请输入密码" />
        </Form.Item>
      </Form>
    </div>
  );
};

export default Login;
